<template>
    <div class="search-suggestion">
        <van-cell
            v-for="(item,index) in allSuggestions"
            :key="index"
            icon="search"
            
        >
            <div slot="title" v-html="Highlight(item)"></div>
        </van-cell>
    </div>
</template>
<script>
import { getSearchSuggestions } from '@/api/search'
import { debounce } from 'lodash'
export default {
    name:'search-suggestion',
    data() {
        return {
            allSuggestions:[]
        }
    },
    methods: {
        Highlight(item){
            return item.replace(
                new RegExp(this.searchText,'gi'),`<span style="color:red">${this.searchText}</span>`
            )
        }
    },
    props:{
        searchText:{
            type:String,
            required:true
        }
    },
    watch:{
        searchText:{
            handler:debounce(async function(){
                const { data } = await getSearchSuggestions(this.searchText)
                this.allSuggestions = data.data.options
                //console.log(data)
            }),
            immediate:true
        }
    }
}
</script>
<style lang="less" scoped>

</style>